<template>
  <je-modal
    v-model:visible="visibleModule"
    width="1200px"
    title="按钮事件"
    class="btn-editor-modal"
    :resize="false"
    :maximizable="false"
    style="padding-bottom: 20px"
    @close="cancelModal"
  >
    <je-panel>
      <je-panel-item>
        <je-tabs v-model:activeKey="activeKey" style="width: 100%" class="btn-tabs-panel">
          <je-tab-pane key="before" tab="动作按钮">
            <je-editor-code
              v-model:value="beforeClick"
              v-model:language="language"
              height="100%"
              width="100%"
              :editor-options="editorOptions"
              @save="handlerBbar('save')"
            />
          </je-tab-pane>
          <je-tab-pane key="after" tab="确认按钮">
            <je-editor-code
              v-model:value="afterClick"
              v-model:language="language"
              height="100%"
              width="100%"
              :editor-options="editorOptions"
              @save="handlerBbar('save')"
            />
          </je-tab-pane>
        </je-tabs>
      </je-panel-item>
      <je-panel-item region="bbar" v-bind="options.bbar">
        <div class="default-bottom">
          <span
            v-for="item in bottomButtons"
            :key="item.key"
            :class="item.class"
            @click="handlerBbar(item.key)"
          >
            {{ item.text }}
          </span>
        </div>
      </je-panel-item>
    </je-panel>
  </je-modal>
</template>
<script>
  import { defineComponent, ref, reactive, toRefs } from 'vue';
  import { Modal, Panel, EditorCode, Tabs } from '@jecloud/ui';
  import { encode, decode, isNotEmpty } from '@jecloud/utils';
  import { showFuncQuerys } from '@jecloud/func';
  import { JE_WORKFLOW_JSEDITOR_BUTTONS } from '@/helper/constant';

  export default defineComponent({
    name: 'BtnEditor',
    components: {
      JeModal: Modal,
      JePanel: Panel,
      JePanelItem: Panel.Item,
      JeEditorCode: EditorCode,
      JeTabs: Tabs,
      JeTabPane: Tabs.TabPane,
    },
    props: {
      pcListeners: {
        type: String,
        default: '',
      },
      funcInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeData'],
    setup(props, { emit }) {
      const visibleModule = ref(true);
      const eventData = ref(
        decode(props.pcListeners || "{ 'beforeClick': '', 'afterClick': '' }") || {
          beforeClick: '',
          afterClick: '',
        },
      );
      const defauleData = reactive({
        language: 'javascript',
        beforeClick:
          eventData.value['beforeClick'] ||
          'const {\r\n    $func,  // 功能对象\r\n    $form, // 功能表单对象\r\n    button,  // 按钮对象\r\n} = EventOptions;\r\n\r\n// 返回false，流程操作阻断\r\n// return true|false;\r\nreturn true',
        afterClick:
          eventData.value['afterClick'] ||
          'const {\r\n    $func,  // 功能对象\r\n    $form, // 功能表单对象\r\n    button,  // 按钮对象\r\n} = EventOptions;',
        editorOptions: { height: '100%', width: '100%' },
        activeKey: 'before',
      });
      const bottomButtons = ref(JE_WORKFLOW_JSEDITOR_BUTTONS);
      const cancelModal = () => {
        visibleModule.value = false;
        emit('changeData', 'cancel');
      };

      //点击按钮
      const handlerBbar = (type) => {
        //保存
        if (type == 'save') {
          if (isNotEmpty(defauleData.beforeClick) || isNotEmpty(defauleData.afterClick)) {
            const data = {
              beforeClick: defauleData.beforeClick,
              afterClick: defauleData.afterClick,
            };
            emit('changeData', 'save', encode(data));
            Modal.notice('保存成功！', 'success');
          } else {
            emit('changeData', 'save', '');
            Modal.notice('保存成功！', 'success');
          }
          //SQL拼装器
        } else if (type == 'sqlFilter') {
          showFuncQuerys({
            funcId: props.funcInfo.funcId || '',
            value: '',
            btnType: 'close',
          });
        }
      };

      return {
        ...toRefs(defauleData),
        cancelModal,
        visibleModule,
        options: { bbar: { size: 40 } },
        defauleData,
        bottomButtons,
        handlerBbar,
      };
    },
  });
</script>
<style lang="less" scoped>
  .btn-editor-modal {
    .default-bottom {
      height: 100%;
      padding: 0 10px;
      background: #1e1e1e;
      border-top: 1px solid #e6e6e6;
      span {
        display: inline-block;
        margin: 0 5px;
        padding: 9px;
        cursor: pointer;
        color: #f9cd90;
        &.save {
          color: #aeffa6;
        }
      }
    }
    .btn-tabs-panel {
      .ant-tabs-nav {
        margin: 0 0 1px 0px;
      }
    }
  }
</style>
<style lang="less">
  .btn-editor-modal {
    .btn-tabs-panel {
      .ant-tabs-nav {
        margin: 0 0 1px 0px;
      }
    }
  }
</style>
